<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Image Annotation Example</title>
        <script type="text/javascript" src="../build/RDFa.js"></script>
        <script type="text/javascript" src="image-annotations.js"></script>
        <style type="text/css">
            body {
               font-family: Arial;
            }
            .image {
               padding-left: 2em;
               padding-right: 2em;
            }
            .tooltip {
               background-color: rgb(200,200,200);
               opacity: 0.75;
               padding: 3px;
            }
            .tooltip > span {
               opacity: 1;
            }
            .annotation {
               margin-top: 1em;
               border: 1px solid rgb(200,200,200);
               padding: 0.2em;
            }
        </style>
    </head>
    <body>
        <article>
            <h1>Using RDFa to Annotate Images</h1><section>
                <h1>The Idea</h1>
                <p>Using RDFa Lite 1.1, image annotations are encoded in a document to avoid custom
                    services or JavaScript code.  Subsequently, client JavaScript code can find the
                    annotations and apply them to the image just by using the RDFa API.   The result
                    is that the image on the left has annotations applied to it to look like the
                    image on the right but with added semantics from the annotations that are
                    described somewhere in the same document.</p>
                <p><img class="image" src="California-Slender-Salamander.jpg" /><img class="image"
                        src="California-Slender-Salamander-after.jpg" /></p>
            </section>
            <section vocab="http://www.milowski.com/O/">
                <h1>A Working Example</h1>
                <p>The image:</p>
                <img src="California-Slender-Salamander.jpg" typeof="annotated" />
                <p>The annotation:</p>
                <div resource="California-Slender-Salamander.jpg" class="annotation">
                    <div property="annotation" typeof="box"> Position: <span property="x"
                            >84</span>,<span property="y">114</span> Size: <span property="width"
                            >90</span> x <span property="height">75</span> Line Color: <span
                            property="line-color">rgb(255,255,0)</span> Stroke : <span
                            property="line-width">2</span> Description: <span property="description"
                            >California Slender Salamander</span> Link: <a property="link"
                            href="http://en.wikipedia.org/wiki/California_slender_salamander"></a>
                    </div>
                </div>
                <p>How to try the example:</p>
                <ul>
                    <li>If you mouse over the yellow box, you'll see a tool-tip.</li>
                    <li>Clicking on the box will open the Wikipedia page for the Salamander.</li>
                </ul>
                <p>None of these semantics (or the yellow box) are in the original page or image.
                    They are just described in the annotation markup above via RDFa. The page is
                    made self-aware by using a library to access the page's own RDFa
                    annotations--some of which could be content hidden from view.</p>
                <p>Internally, the JavaScript for the page invokes a library to access the RDFa and
                    add the annotations to the image:</p>
                <pre>
    var imageAnnotator = new ImageAnnotator();
    imageAnnotator.process(document);
                </pre>
            </section>
            <section>
                <h1>How it Works</h1>
                <ol>
                    <li>
                        <p>First add a <code>typeof</code> attribute to an image that is
                            annotated:</p>
                        <pre>
    &lt;img src="California-Slender-Salamander.jpg" typeof="annotated"/>
                </pre>
                    </li>
                    <li>
                        <p>Next, somewhere in the document, add an annotation. The above example
                            looks like:</p>
                        <pre>
    &lt;div resource="California-Slender-Salamander.jpg">
        &lt;div property="annotation" typeof="box">
            Position: &lt;span property="x">84&lt;/span>,&lt;span property="y">114&lt;/span>
            Size: &lt;span property="width">90&lt;/span> x &lt;span property="height">75&lt;/span>
            Line Color: &lt;span property="line-color">rgb(255,255,0)&lt;/span> 
            Stroke : &lt;span property="line-width">2&lt;/span>
            Description: &lt;span property="description">California Slender Salamander&lt;/span>
            Link: &lt;a property="link" 
                     href="http://en.wikipedia.org/wiki/California_slender_salamander"/>
        &lt;/div>
    &lt;/div>
                </pre>
                        <p>The annotation identifies the image by using the <code>resource</code>
                            attribute with a value of the URI of the image.  Contained within that
                            parent element can be any number of annotations as long as the are
                            associated with the <code>annotation</code> property
                            relation.</p><p>Note that the annotation can be hidden from view by CSS
                            or just be placed in some part of the document's visible content.</p>
                    </li>
                    <li>
                        <p>Include the <code>RDFa.js</code> JavaScript to enable the RDFa API.</p>
                    </li>
                    <li>
                        <p>Include the <code>image-annotations.js</code> to invoke the
                                <code>ImageAnnotator</code> actor.</p>
                    </li>
                </ol>
                <p>The <code>ImageAnnotator</code> JavaScript looks for annotated images by type by
                    retrieving the <code>img</code> elements by type:</p>
                <pre>
    var targets =  document.getElementsByType("http://www.milowski.com/O/annotated");
                </pre>
                <p>This returns an array of elements that have been typed via a <code>typeof</code>
                    attribute. Each typed element image element generates a subject of the URI of
                    the image and each subject has a set of associated annotations in the RDFa
                    data.</p>
                <p>The annotation associates itself with the image resource by using the
                        <code>resource</code> attribute. The result is a triple like:</p>
                <pre>
    &lt;California-Slender-Salamander.jpg> &lt;http://www.milowski.com/O/annotation> &lt;_:1>
                </pre>
                <p>where the <code>_:1</code> is generally a blank node generated by the RDFa
                    processor.</p>
                <p>In the code, the blank node URI is used to get an object called a projection that
                    holds the actual annotation data. This process looks like:</p>
                <pre>
    var annotations = document.data.getValues(
       targets[0].subject,"http://www.milowski.com/O/annotation");
    for (var i=0; i&lt;annotations.length; i++) {
       var annotation = document.data.getProjection(annotations[i]);
       var type = annotation.get("rdf:type");
       if (type=="http://www.milowski.com/O/box") {
          var x = parseInt(annotation.get("http://www.milowski.com/O/x"));
          var y = parseInt(annotation.get("http://www.milowski.com/O/y"));
          ...
       }
    }
                </pre>
                <p>Notice how the annotation properties are available from the projection and used
                    to construct a type-specific annotation. </p>
            </section>
        </article>
    </body>
</html>